﻿<!DOCTYPE html>
<html lang="en">

<head>
  <title>AspNetCoreSpa</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <style type="text/css">
    /* CLIENT-SPECIFIC STYLES */
    #outlook a {
      padding: 0;
    }

    /* Force Outlook to provide a "view in browser" message */
    .ReadMsgBody {
      width: 100%;
    }

    .ExternalClass {
      width: 100%;
    }

    /* Force Hotmail to display emails at full width */
    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    }

    /* Force Hotmail to display normal line spacing */
    body,
    table,
    td,
    a {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    /* Prevent WebKit and Windows mobile changing default text sizes */
    table,
    td {
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    /* Remove spacing between tables in Outlook 2007 and up */
    img {
      -ms-interpolation-mode: bicubic;
    }

    /* Allow smoother rendering of resized image in Internet Explorer */

    /* RESET STYLES */
    body {
      margin: 0;
      padding: 0;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
    }

    table {
      border-collapse: collapse !important;
    }

    body {
      height: 100% !important;
      margin: 0;
      padding: 0;
      width: 100% !important;
    }

    /* iOS BLUE LINKS */
    .appleBody a {
      color: #68440a;
      text-decoration: none;
    }

    .appleFooter a {
      color: #999999;
      text-decoration: none;
    }

    /* MOBILE STYLES */
    @media screen and (max-width: 525px) {

      /* ALLOWS FOR FLUID TABLES */
      table[class="wrapper"] {
        width: 100% !important;
      }

      /* ADJUSTS LAYOUT OF LOGO IMAGE */
      td[class="logo"] {
        text-align: left;
        padding: 20px 0 20px 0 !important;
      }

      td[class="logo"] img {
        margin: 0 auto !important;
      }

      /* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
      td[class="mobile-hide"] {
        display: none;
      }

      img[class="mobile-hide"] {
        display: none !important;
      }

      img[class="img-max"] {
        max-width: 100% !important;
        height: auto !important;
      }

      /* FULL-WIDTH TABLES */
      table[class="responsive-table"] {
        width: 100% !important;
      }

      /* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
      td[class="padding"] {
        padding: 10px 5% 15px 5% !important;
      }

      td[class="padding-copy"] {
        padding: 10px 5% 10px 5% !important;
        text-align: center;
      }

      td[class="padding-meta"] {
        padding: 30px 5% 0px 5% !important;
        text-align: center;
      }

      td[class="no-pad"] {
        padding: 0 0 20px 0 !important;
      }

      td[class="no-padding"] {
        padding: 0 !important;
      }

      td[class="section-padding"] {
        padding: 50px 15px 50px 15px !important;
      }

      td[class="section-padding-bottom-image"] {
        padding: 50px 15px 0 15px !important;
      }

      /* ADJUST BUTTONS ON MOBILE */
      td[class="mobile-wrapper"] {
        padding: 10px 5% 15px 5% !important;
      }

      table[class="mobile-button-container"] {
        margin: 0 auto;
        width: 100% !important;
      }

      a[class="mobile-button"] {
        width: 80% !important;
        padding: 15px !important;
        border: 0 !important;
        font-size: 16px !important;
      }
    }
  </style>
</head>

<body style="margin: 0; padding: 0">
  <!-- HEADER -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
    <tr>
      <td bgcolor="#ffffff">
        <div align="center" style="padding: 0px 15px 0px 15px">
          <table border="0" cellpadding="0" cellspacing="0" width="500" class="wrapper">
            <!-- LOGO/PREHEADER TEXT -->
            <tr>
              <td style="padding: 20px 0px 30px 0px" class="logo">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td bgcolor="#ffffff" width="100" align="left">
                      <a href="https://github.com/asadsahi/aspnetcorespa/" target="_blank"><img alt="Logo"
                          src="https://aspnetcorespa.herokuapp.com/favicon.ico" width="52" height="78" style="
                              display: block;
                              font-family: Helvetica, Arial, sans-serif;
                              color: #666666;
                              font-size: 16px;
                            " border="0" /></a>
                    </td>
                    <td bgcolor="#ffffff" width="400" align="right" class="mobile-hide">
                      <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                          <td align="right" style="
                                padding: 0 0 5px 0;
                                font-size: 14px;
                                font-family: Arial, sans-serif;
                                color: #666666;
                                text-decoration: none;
                              ">
                            <span style="color: #666666; text-decoration: none">Asp.Net 6.0 & Angular 13
                              SPA.<br />Fullstack
                              application.</span>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>

  <!--CONTENT SECTION TO BE OVERRIDEN-->
  @content@

  <!-- ONE COLUMN W/ BOTTOM IMAGE SECTION -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
    <tr>
      <td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 0 15px" class="section-padding-bottom-image">
        <table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
          <tr>
            <td>
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>
                    <!-- COPY -->
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td align="center" style="
                              font-size: 25px;
                              font-family: Helvetica, Arial, sans-serif;
                              color: #333333;
                            " class="padding-copy">
                          AspNetCoreSpa Single page application
                        </td>
                      </tr>
                      <tr>
                        <td align="center" style="
                              padding: 20px 0 0 0;
                              font-size: 16px;
                              line-height: 25px;
                              font-family: Helvetica, Arial, sans-serif;
                              color: #666666;
                            " class="padding-copy">
                          Fullstack application built using latest tech stack
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td>
                    <!-- BULLETPROOF BUTTON -->
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
                      <tr>
                        <td align="center" style="padding: 25px 0 0 0" class="padding-copy">
                          <table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
                            <tr>
                              <td align="center">
                                <a href="https://aspnetcorespa.herokuapp.com" target="_blank" style="
                                      font-size: 16px;
                                      font-family: Helvetica, Arial, sans-serif;
                                      font-weight: normal;
                                      color: #ffffff;
                                      text-decoration: none;
                                      background-color: #48cfad;
                                      border-top: 15px solid #48cfad;
                                      border-bottom: 15px solid #48cfad;
                                      border-left: 25px solid #48cfad;
                                      border-right: 25px solid #48cfad;
                                      border-radius: 3px;
                                      -webkit-border-radius: 3px;
                                      -moz-border-radius: 3px;
                                      display: inline-block;
                                    " class="mobile-button">Open website &rarr;</a>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td>
                    <!--  BOTTOM IMAGE -->
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td style="padding: 50px 0 0 0" align="center">
                          <a href="https://aspnetcorespa.herokuapp.com" target="_blank"><img
                              src="https://aspnetcorespa.herokuapp.com/assets/images/email/secondary-image.jpg"
                              width="500" height="180" border="0" alt="SPA application" class="img-max" style="
                                  display: block;
                                  padding: 0;
                                  font-family: Helvetica, Arial, sans-serif;
                                  color: #666666;
                                  width: 500px;
                                  height: 180px;
                                " /></a>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <!-- TWO COLUMN SECTION -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
    <tr>
      <td bgcolor="#ffffff" align="center" style="padding: 70px 15px 70px 15px" class="section-padding">
        <table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
          <tr>
            <td>
              <!-- TITLE SECTION AND COPY -->
              <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="center" style="
                        font-size: 25px;
                        font-family: Helvetica, Arial, sans-serif;
                        color: #333333;
                      " class="padding-copy">
                    Built using
                  </td>
                </tr>
                <tr>
                  <td align="center" style="
                        padding: 20px 0 20px 0;
                        font-size: 16px;
                        line-height: 25px;
                        font-family: Helvetica, Arial, sans-serif;
                        color: #666666;
                      " class="padding-copy">
                    ASP.NET Core and Angular
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <!-- TWO COLUMNS -->
              <table cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                  <td valign="top" style="padding: 0" class="mobile-wrapper">
                    <!-- LEFT COLUMN -->
                    <table cellpadding="0" cellspacing="0" border="0" width="47%" align="left" class="responsive-table">
                      <tr>
                        <td style="padding: 20px 0 40px 0">
                          <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                              <td align="center" bgcolor="#ffffff" valign="middle">
                                <a href="https://aspnetcorespa.herokuapp.com/" target="_blank"><img
                                    src="https://aspnetcorespa.herokuapp.com/assets/images/aspnetcore.png" width="240"
                                    height="130" style="
                                        display: block;
                                        color: #666666;
                                        font-family: Helvetica, arial,
                                          sans-serif;
                                        font-size: 13px;
                                        width: 240px;
                                        height: 130px;
                                      " alt="Fluid images" border="0" class="img-max" /></a>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" style="
                                    padding: 15px 0 0 0;
                                    font-family: Arial, sans-serif;
                                    color: #333333;
                                    font-size: 20px;
                                  " bgcolor="#ffffff">
                                Asp.Net Core
                              </td>
                            </tr>
                            <tr>
                              <td align="center" style="
                                    padding: 5px 0 0 0;
                                    font-family: Arial, sans-serif;
                                    color: #666666;
                                    font-size: 14px;
                                    line-height: 20px;
                                  " bgcolor="#ffffff">
                                <span class="appleBody"><span style="
                                        font-family: Lucida Console, monospace;
                                      ">Web Framework</span>
                                  with great performance.</span>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <!-- RIGHT COLUMN -->
                    <table cellpadding="0" cellspacing="0" border="0" width="47%" align="right"
                      class="responsive-table">
                      <tr>
                        <td style="padding: 20px 0 40px 0">
                          <table cellpadding="0" cellspacing="0" border="0" width="100%">
                            <tr>
                              <td align="center" bgcolor="#ffffff" valign="middle">
                                <a href="https://aspnetcorespa.herokuapp.com/" target="_blank"><img
                                    src="https://aspnetcorespa.herokuapp.com/assets/images/angular.png" width="240"
                                    height="130" style="
                                        display: block;
                                        color: #666666;
                                        font-family: Helvetica, arial,
                                          sans-serif;
                                        font-size: 13px;
                                        width: 240px;
                                        height: 130px;
                                      " alt="Fluid structures" border="0" class="img-max" /></a>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" style="
                                    padding: 15px 0 0 0;
                                    font-family: Arial, sans-serif;
                                    color: #333333;
                                    font-size: 20px;
                                  " bgcolor="#ffffff">
                                Angular
                              </td>
                            </tr>
                            <tr>
                              <td align="center" style="
                                    padding: 5px 0 0 0;
                                    font-family: Arial, sans-serif;
                                    color: #666666;
                                    font-size: 14px;
                                    line-height: 20px;
                                  " bgcolor="#ffffff">
                                <span class="appleBody">Frontend Framework.</span>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <!-- COMPACT ARTICLE SECTION -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
    <tr>
      <td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 70px 15px" class="section-padding">
        <table border="0" cellpadding="0" cellspacing="0" width="500" style="padding: 0 0 20px 0"
          class="responsive-table">
          <!-- TITLE -->
          <tr>
            <td align="left" style="
                  padding: 0 0 10px 130px;
                  font-size: 25px;
                  font-family: Helvetica, Arial, sans-serif;
                  font-weight: normal;
                  color: #333333;
                " class="padding-copy" colspan="2">
              Find documentation here:
            </td>
          </tr>
          <tr>
            <td valign="top" style="padding: 40px 0 0 0" class="mobile-hide">
              <a href="https://asp.net" target="_blank"><img
                  src="https://aspnetcorespa.herokuapp.com/assets/images/aspnetcore.png" alt="AspNet Core" width="105"
                  height="105" border="0" style="
                      display: block;
                      font-family: Arial;
                      color: #666666;
                      font-size: 14px;
                      width: 105px;
                      height: 105px;
                    " /></a>
            </td>
            <td style="padding: 40px 0 0 0" class="no-padding">
              <!-- ARTICLE -->
              <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                  <td align="left" style="
                        padding: 0 0 5px 25px;
                        font-size: 13px;
                        font-family: Helvetica, Arial, sans-serif;
                        font-weight: normal;
                        color: #aaaaaa;
                      " class="padding-meta">
                    ASP.NET Core
                  </td>
                </tr>
                <tr>
                  <td align="left" style="
                        padding: 0 0 5px 25px;
                        font-size: 22px;
                        font-family: Helvetica, Arial, sans-serif;
                        font-weight: normal;
                        color: #333333;
                      " class="padding-copy">
                    Web framework
                  </td>
                </tr>
                <tr>
                  <td align="left" style="
                        padding: 10px 0 15px 25px;
                        font-size: 16px;
                        line-height: 24px;
                        font-family: Helvetica, Arial, sans-serif;
                        color: #666666;
                      " class="padding-copy">
                    Best performance and developer friendly
                  </td>
                </tr>
                <tr>
                  <td style="padding: 0 0 45px 25px" align="left" class="padding">
                    <table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
                      <tr>
                        <td align="center">
                          <!-- BULLETPROOF BUTTON -->
                          <table width="100%" border="0" cellspacing="0" cellpadding="0"
                            class="mobile-button-container">
                            <tr>
                              <td align="center" style="padding: 0" class="padding-copy">
                                <table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
                                  <tr>
                                    <td align="center">
                                      <a href="https://asp.net" target="_blank" style="
                                            font-size: 15px;
                                            font-family: Helvetica, Arial,
                                              sans-serif;
                                            font-weight: normal;
                                            color: #ffffff;
                                            text-decoration: none;
                                            background-color: #f6bb42;
                                            border-top: 10px solid #f6bb42;
                                            border-bottom: 10px solid #f6bb42;
                                            border-left: 20px solid #f6bb42;
                                            border-right: 20px solid #f6bb42;
                                            border-radius: 3px;
                                            -webkit-border-radius: 3px;
                                            -moz-border-radius: 3px;
                                            display: inline-block;
                                          " class="mobile-button">Learn More &rarr;</a>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td valign="top" style="padding: 40px 0 0 0" class="mobile-hide">
              <a href="https://angular.io" target="_blank"><img
                  src="https://aspnetcorespa.herokuapp.com/assets/images/angular.png" alt="Angular" width="105"
                  height="105" border="0" style="
                      display: block;
                      font-family: Arial;
                      color: #666666;
                      font-size: 14px;
                      width: 105px;
                      height: 105px;
                    " /></a>
            </td>
            <td style="padding: 40px 0 0 0" class="no-padding">
              <!-- ARTICLE -->
              <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                  <td align="left" style="
                        padding: 0 0 5px 25px;
                        font-size: 13px;
                        font-family: Helvetica, Arial, sans-serif;
                        font-weight: normal;
                        color: #aaaaaa;
                      " class="padding-meta">
                    Angular
                  </td>
                </tr>
                <tr>
                  <td align="left" style="
                        padding: 0 0 5px 25px;
                        font-size: 22px;
                        font-family: Helvetica, Arial, sans-serif;
                        font-weight: normal;
                        color: #333333;
                      " class="padding-copy">
                    Angular
                  </td>
                </tr>
                <tr>
                  <td align="left" style="
                        padding: 10px 0 15px 25px;
                        font-size: 16px;
                        line-height: 24px;
                        font-family: Helvetica, Arial, sans-serif;
                        color: #666666;
                      " class="padding-copy">
                    Mobile and Web Framework
                  </td>
                </tr>
                <tr>
                  <td style="padding: 0 0 45px 25px" align="left" class="padding">
                    <table border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
                      <tr>
                        <td align="center">
                          <!-- BULLETPROOF BUTTON -->
                          <table width="100%" border="0" cellspacing="0" cellpadding="0"
                            class="mobile-button-container">
                            <tr>
                              <td align="center" style="padding: 0" class="padding-copy">
                                <table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
                                  <tr>
                                    <td align="center">
                                      <a href="https://angular.io" target="_blank" style="
                                            font-size: 15px;
                                            font-family: Helvetica, Arial,
                                              sans-serif;
                                            font-weight: normal;
                                            color: #ffffff;
                                            text-decoration: none;
                                            background-color: #5d9cec;
                                            border-top: 10px solid #5d9cec;
                                            border-bottom: 10px solid #5d9cec;
                                            border-left: 20px solid #5d9cec;
                                            border-right: 20px solid #5d9cec;
                                            border-radius: 3px;
                                            -webkit-border-radius: 3px;
                                            -moz-border-radius: 3px;
                                            display: inline-block;
                                          " class="mobile-button">Learn More &rarr;</a>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

  <!-- FOOTER -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed">
    <tr>
      <td bgcolor="#ffffff" align="center">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td style="padding: 20px 0px 20px 0px">
              <!-- UNSUBSCRIBE COPY -->
              <table width="500" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
                <tr>
                  <td align="center" valign="middle" style="
                        font-size: 12px;
                        line-height: 18px;
                        font-family: Helvetica, Arial, sans-serif;
                        color: #666666;
                      ">
                    <span class="appleFooter" style="color: #666666">Built with love by Asad Sahi</span><br /><a
                      class="original-only" style="color: #666666; text-decoration: none">Unsubscribe</a><span
                      class="original-only" style="
                          font-family: Arial, sans-serif;
                          font-size: 12px;
                          color: #444444;
                        ">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span><a
                      style="color: #666666; text-decoration: none">View this email in your browser</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>